<template>
    <div v-if="userInfo" class="title">
        <div>
        </div>
        <div class="mt10">
            <div>账号：</div>
            <input type="text" name="" id="" :value="userInfo.username">
        </div>
        <div class="mt10">
            <div>所属机构：</div>
            <input type="text" name="" id="" value="千峰社区">
        </div>
        <div class="mt10">
            <div>担任角色：</div>
            <input type="text" name="" id="" :value="roleList.find((item) => item.value == userInfo.role).label ">
        </div>
        <div class="mt10"> 
            <div>用户名：</div>
            <input type="text" name="" id="" :value="userInfo.username">
        </div>
        <div class="mt10"> 
            <div>手机号：</div>
            <input type="text" name="" id="" :value="userInfo.phone">
        </div>
        <div class="mt10"> 
            <div>注册时间</div>
            <input type="text" name="" id="" :value="$filters.timeFormat(userInfo.time)">
        </div>
    </div>
</template>


<script>
import { reactive, toRefs } from '@vue/reactivity'
import { computed } from '@vue/runtime-core'
import { useStore } from 'vuex'
import { roleList } from "@/utils"
export default {
    setup() {
        const state=reactive({
            roleList,
        })
        var moment = require('moment');
        const store=useStore();
        const userInfo = computed(() => store.state.userInfo);
        return {
            ...toRefs(state),
            userInfo,
            moment,
            
        }
    },
}
</script>

<style lang="scss" scoped>
.title{
    padding: 50px;
}
.mt10{
    margin-top: 20px;
    display: flex;
    div{
        width: 100px;
    }
    input{
        height: 30px;
        width: 200px;
        border: 1px solid rgb(116, 113, 113);
    }
}
</style>